<template>
	<view class="pd20 content">
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="project.name" placeholder="输入项目名称" />
				<van-field v-model="project.stage" type="textarea" rows="9" placeholder="输入项目的多个阶段" class="textarea mgb20" />
			</van-cell-group>
			<text class="cr fs24 mgl20">提醒:xxxxxxx</text>
			<view class="mgt20">
				增加内容:
				<select v-model="project.lm">
					<option value="" selected>未选择</option>
					<option value="lm">栏目</option>
				</select>
				<select v-model="project.ym">
					<option value="" selected>未选择</option>
					<option value="lm">页面</option>
				</select>
				<select v-model="project.wz">
					<option value="" selected>未选择</option>
					<option value="lm">位置</option>
				</select>
			</view>
			<view class="flex type">
				类别:
				<view v-for="item in typeStyleList" class="flex mgl20">
					<van-button type="primary" size="small" @click="createTxt(item)">{{ item }}</van-button>
				</view>
			</view>
			<view class="flex aic sendPicture mgl20 mgb40">
				<van-field v-model="project.htmlPictyre" placeholder="输入项目名称" />
				<van-uploader>
					<van-button type="primary" class="mgt20">上传图</van-button>
				</van-uploader>
			</view>
			<view class="fs24 mgl20">工作人员:xxxx</view>
			<van-field v-model="project.plsc" type="textarea" rows="8" placeholder="输入项目的多个阶段" />
			<van-checkbox v-model="project.checked" class="flex fs24">
				<view class="mgl20 mgt20">想批量多个栏目，或多个页面，位置请保证上方增加内容选择正确。如在不限范围，换行表示多条问题信息。</view>
			</van-checkbox>

			<view class="mgt40 pd20">
				<van-button block type="primary" native-type="submit">生成</van-button>
			</view>
		</van-form>
	</view>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
const typeStyleList = ['[栏目]', '[[页面]]', '{位置}', '全部'];
const project = reactive({
	name: '',
	stage: '',
	lm: '',
	ym: '',
	wz: '',
	htmlPictyre: '',
	plsc: '',
	checked: false
});
const createTxt = (item) => {
	project.plsc = `${project.plsc}${item}`;
};
watch([project.lm, project.ym, project.wz], ([n1, n2, n3]) => {
	console.log(n1, n2, n3);
});
const onSubmit = () => {};
</script>

<style lang="scss">
.van-field {
	border: 1px solid #eee;
	margin-top: 20rpx;
}
.textarea {
	width: 80%;
}
select {
	border: 1px solid #55aaff;
	border-radius: 5rpx;
	height: 60rpx;
	min-width: 140rpx;
	margin-right: 20rpx;
}
.type {
	margin: 40rpx 0;
	.van-button {
		margin-right: 20rpx;
	}
}
.sendPicture {
	height: 75rpx;
	.van-field {
		width: 70%;
		height: 100%;
	}
	.van-button {
		width: 150rpx;
		height: 75rpx;
	}
}
@media (min-width: 750px) {
	.content {
		width: 1000rpx;
		margin: 0 auto;
	}
}
</style>
